<template>
    <div class="page-demo-form-advanced">
        <div class="main-page-content">
            <ContentHeader title="这里是代码行辅助度量" explain="上传您的代码文件，您将得到代码行分析结果"></ContentHeader>
            <div class="page-content">
                <span style="font-size: large;">上传您的代码文件</span>
                <a-divider />
                <a-upload name="file" :multiple="false" :showUploadList="false" :customRequest="getLOCResult">
                    <a-button> <a-icon type="upload" /> 选择要上传的代码文件</a-button>
                </a-upload>
                
            </div>
            <div v-if="!(LOCResult == undefined || LOCResult == null || LOCResult.length <= 0)" class="page-content">
                <div style="margin-top: 25px;position: relative;">
                    <span style="font-size: large;">代码辅助度量结果</span>
                    <a-divider />
                    <a-card class="form-card" :loading="false" :bordered="false">
                        <a-table :columns="columns" :dataSource="LOCResult" :pagination="false" :loading="false">
                        </a-table>
                    </a-card>
                </div>
                <div style="height:46px"></div>
            </div>
            <ContentFooter v-if="!(LOCResult == undefined || LOCResult == null || LOCResult.length <= 0) "  explain="软件项目的代码行估算是进行成本和工作量估算的重要依据之一。">
                <div class="helpnote">
                    <div>
                        代码行（LOC，Lines of Code）一般指所有的可执行的源代码行数，包括可交付的工作控制语言语句、数据定义、数据类型生命、输入/输出格式声明等。<br/>
                        代码行估算法是指从过去开发类似产品的经验和历史数据出发，估算出待开发软件的代码行(Line of Code，LOC)。<br />
                    </div>
                    <div>
                        代码行估算法是一种直观而又自然的软件规模估算方法，它是对软件和软件开发过程的直接度量。
                    </div>
                    <div>
                        SLOC：源代码行；<br />
                        NCLOC：非注释代码行/有效代码行；<br />
                        CLOC：注释代码行；<br />
                        PLOC：物理代码行，表示除了注释外的源程程序行数；<br />
                        LLOC（逻辑代码行，表示可执行的源程序行数）。<br />
                    </div>
                </div>
            </ContentFooter>
            <ContentFooter v-else explain="软件项目的代码行估算是进行成本和工作量估算的重要依据之一。" activeKey="1">
                <div class="helpnote">
                    <div>
                        代码行（LOC，Lines of Code）一般指所有的可执行的源代码行数，包括可交付的工作控制语言语句、数据定义、数据类型生命、输入/输出格式声明等。<br/>
                        代码行估算法是指从过去开发类似产品的经验和历史数据出发，估算出待开发软件的代码行(Line of Code，LOC)。<br />
                    </div>
                    <div>
                        代码行估算法是一种直观而又自然的软件规模估算方法，它是对软件和软件开发过程的直接度量。
                    </div>
                    <div>
                        SLOC：源代码行；<br />
                        NCLOC：非注释代码行/有效代码行；<br />
                        CLOC：注释代码行；<br />
                        PLOC：物理代码行，表示除了注释外的源程程序行数；<br />
                        LLOC（逻辑代码行，表示可执行的源程序行数）。<br />
                    </div>
                </div>
            </ContentFooter>
        </div>

    </div>
</template>

<script>
import ContentHeader from "@/components/content_header/content_header";
import ContentFooter from "@/components/content_footer/content_footer"
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
let j = 0;
export default {
    components: {
        ContentHeader,
        ContentFooter
    },
    data() {
        return {
            LOCResult: [],
            "columns": [
                {
                    title: '非注释代码行',
                    dataIndex: 'ncloc',
                    key: 'ncloc',
                    align: 'center',
                    width: '20%',
                    scopedSlots: { customRender: 'ncloc' }
                },
                {
                    title: '注释代码行',
                    dataIndex: 'cloc',
                    key: 'cloc',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'cloc' }
                },
                {
                    title: '逻辑代码行',
                    dataIndex: 'logicLine',
                    key: 'logicLine',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'logicLine' }
                },
                {
                    title: '物理代码行',
                    dataIndex: 'physicalLine',
                    key: 'physicalLine',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'physicalLine' }
                },
                {
                    title: '总代码行',
                    dataIndex: 'total',
                    key: 'total',
                    align: 'center',
                    width: '12%',
                    scopedSlots: { customRender: 'total' }
                }
            ],
        }
    },
    computed: {
    },
    created() {
        this.loading_page = true;
        setTimeout(() => {
            this.loading_page = false;
        }, 1500);
    },
    
    methods: {
        getLOCResult(data) {
            console.log("上传代码文件，发送HTTP请求……", data.file)
            let formdata = new FormData()
            formdata.append("file", data.file)
            this.$http.post('http://localhost:8085/scalemetric/loc', formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
                }
            }).then(res => {
                console.log("获取LOC度量结果，返回结果为：", res.data)
                this.LOCResult.push({
                    key: (j).toString(),
                    ncloc: res.data.data.ncloc,
                    cloc: res.data.data.cloc,
                    logicLine: res.data.data.logicLine,
                    physicalLine: res.data.data.physicalLine,
                    total: res.data.data.total
                }
                )
                j = j + 1
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import "./advanced.less";
</style>